<template>
  <div class="detail">
    <van-nav-bar
      left-text="返回"
      @click-left="$router.back()"
      fixed
      title="记录详情"
    />
    <div class="title-padding"></div>
    <van-cell title="登记编号" :value="detail.dengjibianhao"></van-cell>
    <van-cell title="来访姓名" :value="detail.laifangxingming"></van-cell>
    <van-cell title="身份证号" :value="detail.shenfenzheng"></van-cell>
    <van-cell title="联系手机" :value="detail.lianxishouji"></van-cell>
    <van-cell title="来访时间" :value="detail.laifangshijian"></van-cell>
    <van-cell title="离开时间" :value="detail.likaishijian"></van-cell>
    <van-cell title="来访事由" :value="detail.laifangshiyou"></van-cell>
    <van-cell title="邀请人姓名" :value="detail.xingming"></van-cell>
    <van-cell title="手机号码" :value="detail.shoujihaoma"></van-cell>
    <van-cell title="申请时间" :value="detail.shenqingshijian"></van-cell>
    <van-cell title="审核回复" :value="detail.shhf"></van-cell>
    <van-cell title="审核状态" :value="detail.sfsh"></van-cell>
    <van-button
      class="passcodeBtn"
      color="skyblue"
      type="info"
      round
      @click="
        $router.push(
          `/passcode?sfsh=${detail.sfsh}&likaishijian=${detail.likaishijian}`
        )
      "
      >查看通行码</van-button
    >
    <div>
      <van-button class="evaluateBtn" type="primary" round @click="showModal()"
        >去评价</van-button
      >
      <van-button class="backBtn" type="danger" round @click="returnBack()"
        >返回</van-button
      >
    </div>
    <div class="bottomBox"></div>

    <van-dialog
      v-model="show"
      title="评价"
      confirm-button-text="提交"
      :before-close="onBeforeClose"
      show-cancel-button
    >
      <div class="record-dialog">
        <van-rate class="record-rate" v-model="rateData.score" />
      </div>
      <van-field
        v-model="rateData.message"
        rows="2"
        autosize
        label="详细评价"
        type="textarea"
        maxlength="50"
        placeholder="请输入详细评价"
        show-word-limit
      />
    </van-dialog>
  </div>
</template>

<script>
/* eslint-disable */
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "record-detail",
  data() {
    return {
      detail: {},
      show: false,
      rateData: {
        message: "",
        score: 0,
      },
    };
  },
  methods: {
    returnBack() {
      this.$router.back();
    },
    showModal() {
      this.show = true;
    },
    onBeforeClose(action, done) {
      // 在这里可以进行一些关闭前的处理
      if (action === "confirm") {
        // 用户点击了确认按钮
        // 这里可以做一些提交数据的操作
        console.log("提交评价");
        console.log("rateData", { ...this.rateData });
        this.rateData = {};
      } else if (action === "cancel") {
        // 用户点击了取消按钮或者点击了遮罩层关闭对话框
        console.log("取消评价");
      }
      done();
      // 如果要阻止对话框关闭，可以返回 false
      // return false;
    },
  },
  created() {
    this.detail = this.$route.query;
    console.log(this.detail);
    if (this.detail.shhf == "null" || !this.detail.shhf) {
      this.detail.shhf = "暂无回复，请耐心等待";
    }
    console.log("this.detail", this.detail);
    if (this.detail.sfsh === "是") {
      this.detail.sfsh = "通过";
    }
    if (this.detail.sfsh === "否") {
      this.detail.sfsh = "未通过";
    }
  },
  watch: {
    $route(to, from) {
      this.detail = cloneDeep(to.query);
      if (this.detail.shhf == "null" || !this.detail.shhf)
        this.detail.shhf = "暂无回复，请耐心等待审批";
      console.log("this.detail", this.detail);
      if (this.detail.sfsh === "是") {
        this.detail.sfsh = "通过";
      }
      if (this.detail.sfsh === "否") {
        this.detail.sfsh = "未通过";
      }
    },
  },
};
</script>

<style scoped>
.detail {
  padding: 20px;
}
.title-padding {
  padding-top: 5vh;
}

.passcodeBtn {
  margin-top: 3vh;
  /* margin-left: 35vw; */
  width: 90vw;
}
.evaluateBtn {
  margin-top: 1vh;
  /* margin-left: 35vw; */
  width: 44vw;
  /* color: skyblue; */
}
.backBtn {
  margin-top: 1vh;
  margin-left: 0.5vh;
  /* margin-left: 35vw; */
  width: 44vw;
}

.record-dialog {
  padding: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottomBox {
  margin-bottom: 6vh;
}
</style>
